<template>
  <div class="goods">
    <div class="wrap">
      <Crumb> </Crumb>
      <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li>
          <strong>排序：</strong>
          <!-- <span class="active">全部</span>
          <span>我还可以兑换</span>
          <span>0-500个</span>
          <span>500-1000个</span>
          <span>1000-1500个</span>
          <span>1500-2500个</span> -->
          <span
            :class="{ active: index == num }"
            v-for="(item, index) in options1"
            :key="index"
            @click="options1Fn(index, item.min, item.max)"
            >{{ item.txt }}</span
          >
        </li>
        <li>
          <strong>分类：</strong>
          <!-- <span class="active">全部</span>
          <span>实物礼品</span>
          <span>虚拟礼品</span> -->
          <span
            v-for="(item, index) in options2"
            :key="index"
            :class="{ active: item.isActive }"
            @click="options2Fn(index, item.type)"
            >{{ item.txt }}</span
          >
        </li>
      </ul>
      <List :arr="goodShowList" />
      <p>
        <span :class="[!isReach ? 'iconfont icon-loading first' : '', 'first1']"></span>{{ isReach ? '加载完毕' : '' }}
      </p>
    </div>
  </div>
</template>                            
<script>
import Crumb from '../components/Crumb.vue'
import List from '../components/home/List.vue'
import { allGoods } from '@/request/api'
import { getScrollTop, getClientHeight, getScrollHeight } from '@/utils/index'
export default {
  data() {
    return {
      //栏目 目前可提供的参数是 1->精品推荐 2-> 热门兑换 0->全部
      did: 0,
      // 1->实体商品 2->虚拟商品 0->全部 )
      type: 0,
      min: 0,
      max: 10000,
      //    商品关键词
      keyword: '',
      //渲染的数组
      goodList: [],
      //用来加载，
      goodShowList: [],
      //t每页8条
      size: 8,
      //默认展示的页数
      page: 1,
      //滚动监听到底的状态
      isLoading: false,
      //显示是加载中还是加载完毕
      isReach: false,
      //排序项数组
      options1: [
        { min: 0, max: 10000, txt: '全部' },
        { min: 0, max: 0, txt: '我还可以兑换' },
        { min: 0, max: 500, txt: '0-500分' },
        { min: 500, max: 1000, txt: '500-1000分' },
        { min: 1000, max: 1500, txt: '1000-1500分' },
        { min: 1500, max: 2500, txt: '1500-2500分' },
        { min: 2500, max: 6500, txt: '2500-6500分' },
        { min: 6500, max: 10000, txt: '6500-10000分' }
      ],
      options2: [
        { txt: '全部', type: 0, isActive: true },
        { txt: '实物礼品', type: 1, isActive: false },
        { txt: '虚拟物品', type: 2, isActive: false }
      ],
      num: 0
    }
  },
  watch: {
    '$route.query.keyword': {
      handler(n, o) {
        this.keyword = n
        this.goodsSearch()
      }
    }
  },
  async created() {
    this.keyword = this.$route.query.keyword
    this.goodsSearch()
  },

  components: {
    Crumb,
    List
  },
  methods: {
    async goodsSearch() {
      let res = await allGoods({
        did: this.did,
        type: this.type,
        min: this.min,
        max: this.max,
        keyword: this.keyword
      })
      console.log(res)
      this.goodList = res.data.data
      this.goodShowList = this.goodList.filter((item, index) => index < 8)
      this.page = 1
      this.isReach = false
      if (this.goodShowList.length == this.goodList.length) {
        this.isReach = true
        return
      }
    },
    options1Fn(idx, min, max) {
      this.num = idx
      this.min = min
      this.max = max
      //重新查询
      this.goodsSearch()
    },
    options2Fn(index, type) {
      this.options2.forEach((item) => (item.isActive = false))
      this.options2[index].isActive = true
      this.type = type
      //重新查询
      this.goodsSearch()
    },
    //滚动监听
    scrollFn() {
      //滚动的高度加上可视的的高度，大于整个方档的高度  证明我划到底部了
      if (getClientHeight() + getScrollTop() >= getScrollHeight() - 200) {
        console.log('滚动了', getScrollTop() + getClientHeight(), getScrollHeight())
        //已经得到完整的数据的，只是没有完全渲染出来
        //加载提示什么时候为真呢  新数组与旧数组长度一样的时候
        if (this.goodList.length == this.goodShowList.length) {
          this.isReach = true
          return
        }
        if (this.isLoading == false) {
          //一进来就加载数据
          this.isLoading = true
          this.page++
          setTimeout(() => {
            for (let i = (this.page - 1) * this.size; i < this.page * this.size; i++) {
              this.goodList[i] && this.goodShowList.push(this.goodList[i])
            }
            this.isLoading = false
          }, 1500)
        }
      }
    }
  },
  //  加载完监听
  mounted() {
    window.addEventListener('scroll', this.scrollFn)
  },
  //在什么之前销毁  离开页面就销毁方法
  beforeDestroy() {
    window.removeEventListener('scroll,', this.scrollFn)
  }
}
</script>
 
<style lang = "less" scoped>
@import '../assets/css/public.less';
p {
  text-align: center;
  .first {
    animation: two 1s linear infinite;
  }
  @keyframes two {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
.first1 {
  display: inline-block;
  animation: two1 1s linear infinite;
}
@keyframes two1 {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.goods {
  padding-bottom: 50px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span {
        margin-right: 20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: @base-color;
          font-weight: bold;
        }
      }
    }
  }
}
</style>